<template>
   <div class="order_page">
		<head-top head-title="订单列表" go-back="true"></head-top>
      <ul class="order_list_ul" v-load-more="loadMore">
         <li class="order_list_li" v-for="item in orderList" :key="item.id">
            <img :src="imgBaseUrl + item.restaurant_image_url" class="restaurant_image">
            <section class="order_item_right">
               <section @click="showDetail(item)">
                     <header class="order_item_right_header">
                         <section class="order_header">
                             <h4 >
                                 <span class="ellipsis">{{item.restaurant_name}} </span>
                                 <svg fill="#333" class="arrow_right">
                                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                                 </svg>
                             </h4>
                             <p class="order_time">{{item.formatted_created_at}}</p>
                         </section>
                         <p class="order_status">
                             {{item.status_bar.title}}
                         </p>
                     </header>
                     <section class="order_basket">
                         <p class="order_name ellipsis">{{item.basket.group[0][0].name}}{{item.basket.group[0].length > 1 ? ' 等' + item.basket.group[0].length + '件商品' : ''}}</p>
                         <p class="order_amount">¥{{item.total_amount.toFixed(2)}}</p>
                     </section>
                 </section>
                 <div class="order_again">
                     <compute-time v-if="item.status_bar.title == '等待支付'" :time="item.time_pass"></compute-time>
                     <router-link :to="{path: '/shop', query: {geohash, id: item.restaurant_id}}" tag="span" class="buy_again" v-else>再来一单</router-link>
                 </div>
             </section>
         </li>
      </ul>
      <foot-guide></foot-guide>
      <transition name="loading">
         <loading v-show="showLoading"></loading>
      </transition>
      <transition name="router-slid" mode="out-in">
         <router-view></router-view>
      </transition>
   </div>
</template>

<script>
   import headTop from '../../components/header/head';
   import loading from '../../components/common/loading';
   import fooiGuide from '../../components/footer/footGuide';
   
   export default {
	   data () {
	   return {

	   }
   },
   methods: {

   }
 }
</script>

<style>
 
</style>